<template>
  <div class="admin-view">
    <div class="admin-top">
      <div class="top-menu">
        <div class="bread">
          <el-breadcrumb separator="｜">
            <el-breadcrumb-item >
              <el-dropdown >
                <span class="el-dropdown-link"> 管理员<i class="el-icon-setting el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="clearfix">个人中心 </el-dropdown-item>
                  <el-dropdown-item class="clearfix">我的。。</el-dropdown-item>
                </el-dropdown-menu>
             </el-dropdown>
            </el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">消息<el-badge :value="3" ><i class="el-icon-bell"></i></el-badge></a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="#/user/login">退出</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="top-nav">
        <ul class="nav-ul">
          <router-link 
          v-for="(item, index) in nav"
          :to="item.path" 
          tag="li"
          :key="index"
          ><span >{{item.title}}</span>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="admin-content">
      <left-slide :nav="nav"></left-slide>
      <main-content>
        <router-view></router-view>
      </main-content>
    </div>
  </div>
</template>
<style lang='scss'>
  .el-icon-bell:before{
    font-size: 20px;
  }
  .top-menu{
    height:110px;
    background:url('~assets/images/top.png') center center;
    position: relative;
  }
  .el-breadcrumb{
    right: 30px;
    bottom: 10px;
    position: absolute
  }
  .top-nav{
    background:#53c79f;
    height:40px;
    .nav-ul{
      margin:0 auto;
      // width:940px;
      background:#53c79f;
      margin-left: 235px;
      li{
        font-weight: bold;
        font-size: 16px;
        color: #fff;
        height: 34px;
        line-height: 36px;
        margin-top: 6px;
        padding: 0 15px;
        display: inline-block;
    
        span{
          display:inline-block;
          width:100%;
          height:100%;
        }
        &.router-link-active, &:hover {
          background-color: #fff !important;
          color:#53c79f;
        }
      }
    }
  }

</style>
<script type="text/javascript">
  import {mainContent, leftSlide} from 'components'
  import {nav} from 'config'
  export default {
    name: 'page',
    data(){
      return {
       
        nav:nav
      }
    },
    methods:{
    },
    components: {
      mainContent,
      leftSlide
    }
  }
</script>
